<template>
  <div class="params mb-3">
    <el-form :model="form" :inline="true" size="small">
      <el-form-item label="客户姓名:">
        <el-input v-model="form.customerName" placeholder="请输入客户姓名"></el-input>
      </el-form-item>
      <el-form-item label="客户电话:">
        <el-input v-model="form.customerMobile" placeholder="请输入客户电话"></el-input>
      </el-form-item>
      <el-form-item label="签约时间:">
        <el-date-picker v-model="timeSlot" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-button type="primary" size="small" icon="el-icon-plus" @click="addContract">新增签约</el-button>
  </div>
</template>

<script>
import { broadcast } from "@/utils/util";
export default {
  data() {
    return {
      form: {
        customerName: "",
        customerMobile: "",
      },
      timeSlot: [],
    };
  },

  async mounted() {
    this.search();
  },
  methods: {
    search() {
      const form = Object.assign({}, this.form);
      if (this.timeSlot) {
        form.startDate = this.timeSlot[0];
        form.endDate = this.timeSlot[1];
      }

      this.$emit("search", form);
    },
    addContract() {
      broadcast("look.user.sign", {});
      // this.$router.push({
      //   name: "addContract",
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
.params {
  padding-top: 20px;
  .wrapping {
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}
</style>
